<template>
  <commonTable
    rowKey="depositId"
    :columns="roomTypeTableState.columns"
    :rules="rules"
    name="deposit"
  >
    <template #form="{ record }">
      <a-form-item label="押金价格" name="depositPrice">
        <a-input
          type="number"
          v-model:value.number="record.depositPrice"
        ></a-input>
      </a-form-item>
      <a-form-item label="描述" name="depositDescription">
        <a-input v-model:value="record.depositDescription"></a-input>
      </a-form-item>
    </template>
  </commonTable>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import commonTable from "../../utils/CommonTable";
import { roomType } from "@/api";

const store = useStore();
const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "depositId",
    },
    {
      title: "押金价格",
      dataIndex: "depositPrice",
    },
    {
      title: "描述",
      dataIndex: "depositDescription",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
const rules = {
  depositDescription: [{ required: true, message: "押金描述不能为空" }],
  depositPrice: [
    {
      required: true,
      type: "number",
      min: 0,
      message: "押金金额不能为空",
    },
  ],
};
</script>

<style scoped></style>
